<template>
  <div class="module noBlueBg">
    <div class="title">
      <span class="iconfont mr3" :class="cfg.icon"></span>
      {{cfg.title}}
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Module",
    props: ['cfg']
  }
</script>

<style scoped lang="scss">
  .module {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: rgba(17, 22, 41, .5);

    .title {
      color: var(--module-title-color);
      padding: 0 10px;
      height: 36px;
      line-height: 36px;
      background: url("~img/common/module_title_bg.png") -10px center no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
    }

    .content {
      flex: 1;
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      /*overflow: hidden;*/

      /deep/ .item-group {
        display: flex;
        height: 100%;
        justify-content: space-between;
      }
    }
  }

  .module.scroll .content{
    overflow: hidden;
  }


</style>
